<template>
  <div class="fw fh">
    <el-row>
      <el-col class="card" :xs="24" :md="12" :lg="10" :xl="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <div>计算器</div>
              <el-button type="primary" plain size="default" @click="resetData">重置</el-button>
            </div>
          </template>

          <el-table :data="tableData" show-summary>
            <el-table-column prop="label" label="词条">
              <template #default="{ row, $index }">
                <el-select
                  filterable
                  clearable
                  default-first-option
                  value-key="label"
                  v-model="row.entries"
                  :filter-method="filteredEntries"
                  @change="(v) => selectRow(v, $index)"
                >
                  <el-option v-for="(item, index) in filterEntries" :key="`option-${item.label}`" :value="item" :label="item.label">
                    <div>{{ item.label }}</div>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="label" label="数值">
              <template #default="{ row }">
                <el-input-number v-model="row.value" :min="row.entries.min" :max="row.entries.max" :step="1" controls-position="right"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="评分">
              <template #default="{ row }">
                <span>{{ computedScore(row) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <div class="p-20 flex-center">
            <el-button type="primary" icon="el-icon-plus" @click="addRow">添加词条</el-button>
          </div>
        </el-card>

        <div class="quality" :class="computedQuality"></div>
      </el-col>
    </el-row>
  </div>

  <div class="tangzhu"></div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const entries = [
  { label: "气海", tlabel: "气海", min: 6, max: 12 },
  { label: "攻击", tlabel: "攻击", min: 47, max: 92 },
  { label: "最小攻击", tlabel: "最小攻击", min: 126, max: 243 },
  { label: "最大攻击", tlabel: "最大攻击", min: 126, max: 243 },
  { label: "最小攻击 + 最大攻击", tlabel: "最小攻击最大攻击", min: 47, max: 92 },
  { label: "元素穿透", tlabel: "元素穿透", min: 47, max: 91 },
  { label: "单穿透", tlabel: "单穿透", min: 23, max: 45 },
  { label: "全元素攻击", tlabel: "全元素攻击", min: 49, max: 95 },
  { label: "单元素攻击", tlabel: "单元素攻击", min: 46, max: 89 },
  { label: "破防", tlabel: "破防", min: 34, max: 67 },
  { label: "破盾", tlabel: "破盾", min: 50, max: 96 },
  { label: "会心会伤", tlabel: "会心会伤", min: 14, max: 26 },
  { label: "星辰 · 气海", tlabel: "星辰气海", min: 9, max: 16 },
  { label: "星辰 · 攻击", tlabel: "星辰攻击", min: 84, max: 162 },
  { label: "星辰 · 最小攻击", tlabel: "星辰最小攻击", min: 169, max: 324 },
  { label: "星辰 · 最大攻击", tlabel: "星辰最大攻击", min: 169, max: 324 },
  { label: "星辰 · 会心", tlabel: "星辰会心", min: 18, max: 35 },
  { label: "星辰 · 全元素攻击", tlabel: "星辰全元素攻击", min: 66, max: 128 },
  // { label: "龙腾 · 全元素攻击", tlabel: "龙腾全元素攻击", min: 66, max: 128 },
  { label: "星辰 · 元素穿透", tlabel: "星辰元素穿透", min: 64, max: 123 },
  // { label: "龙腾 · 元素穿透", tlabel: "龙腾元素穿透", min: 64, max: 123 },
  { label: "乾坤 · 元素穿透", tlabel: "乾坤元素穿透", min: 4.1, max: 5.7 },

  { label: "内功气盾", tlabel: "内功气盾", min: 101, max: 193 },
  { label: "外功气盾", tlabel: "外功气盾", min: 101, max: 193 },
  { label: "单抗", tlabel: "单抗", min: 24, max: 46 },
  { label: "气血", tlabel: "气血", min: 586, max: 1126 },
  { label: "根骨", tlabel: "根骨", min: 6, max: 12 },
  { label: "身法", tlabel: "身法", min: 6, max: 12 },
  { label: "耐力", tlabel: "耐力", min: 6, max: 12 },
  { label: "内功防御", tlabel: "内功防御", min: 74, max: 142 },
  { label: "外功防御", tlabel: "外功防御", min: 74, max: 142 },
  { label: "抗会心", tlabel: "抗会心", min: 14, max: 26 },
  { label: "星辰 · 气血上限", tlabel: "星辰气血上限", min: 787, max: 1510 },
  { label: "星辰 · 气盾", tlabel: "星辰气盾", min: 113, max: 216 },
  { label: "星辰 · 根骨", tlabel: "星辰根骨", min: 9, max: 16 },
  { label: "星辰 · 身法", tlabel: "星辰身法", min: 9, max: 16 },
  { label: "星辰 · 耐力", tlabel: "星辰耐力", min: 9, max: 16 },
  { label: "星辰 · 全元素抗", tlabel: "星辰全元素抗", min: 64, max: 123 },
];
const filterEntries = ref(entries);
const tableData = ref([]);

const computedScore = computed(() => {
  return (row) => {
    const score = row.value ? ((row.value - row.entries.min) / (row.entries.max - row.entries.min)).toFixed(2) : "";
    row.score = score;
    return score;
  };
});
const computedQuality = computed(() => {
  const sums = tableData.value.reduce((acc, cur) => {
    if (cur.score) {
      acc += parseFloat(cur.score);
    }
    return acc;
  }, 0);
  switch (true) {
    case sums > 0 && sums < 3:
      return "凡";
    case sums >= 3 && sums < 3.5:
      return "精";
    case sums >= 3.5 && sums < 4:
      return "绝";
    case sums >= 4:
      return "极";
    default:
      return;
  }
});

/** 添加一行 */
const addRow = () => {
  if (tableData.value.length >= 5) {
    return;
  }
  tableData.value.push({
    entries: { label: "", min: 0, max: 0 },
    value: "",
    score: "",
  });
};
/** 过滤词条 */
const filteredEntries = (e: string) => {
  if (!e) {
    filterEntries.value = entries;
    return;
  }
  filterEntries.value = entries.filter((item) => item.tlabel.includes(e.toLowerCase()));
};
/** 选中词条 */
const selectRow = (v: string, index: number) => {
  tableData.value[index] = { entries: v, value: "" };
};
/** 重置数据 */
const resetData = () => {
  tableData.value = [];
};
</script>

<style scoped lang="scss">
.card {
  position: relative;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tangzhu {
  width: 1170px;
  height: 548px;
  right: 30px;
  bottom: 30px;
  box-shadow: var(--box-shadow-inset);
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  background-image: url("@/assets/image/tangzhu.png");
}
.quality {
  position: absolute;
  right: -60px;
  bottom: 0px;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 300px 300px;
  z-index: 10000;

  &.凡 {
    background-image: url("@/assets/image/quality/fan.png");
  }
  &.精 {
    background-image: url("@/assets/image/quality/jing.png");
  }
  &.绝 {
    background-image: url("@/assets/image/quality/jue.png");
  }
  &.极 {
    background-image: url("@/assets/image/quality/ji.png");
  }
}
</style>
